<!-- 首页滚动新闻 -->
<template>
  <div class="index-news">
    <div class="news">
      <div class="icon">
        <img src="@/assets/images/news.png" alt="" />
      </div>
      <ul class="news-list" ref="list" :class="{ trans: flag }">
        <li v-for="(newListData, index) in newsListDatas" :key="index">
          {{newListData.title}}
        </li>
      </ul>
      <div class="more">
        <i class="iconfont icon-jiantou2"></i>
      </div>
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
  //import引入的组件需要注入到components对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      newsListDatas: [
        {
          id: 1,
          title: "新闻001",
        },
        {
          id: 2,
          title: "新闻002",
        },
        {
          id: 3,
          title: "新闻003",
        },
        {
          id: 4,
          title: "新闻004",
        },
      ],
      timer: null,
      flag: false,
    };
  },

  //方法集合
  methods: {
    scrollNews() {
      var oUl = this.$refs.list; //获取ul
      oUl.style.top = "-3rem";
      this.flag = !this.flag;
      setTimeout(() => {
        //将数组的第一个元素添加到末尾
        this.newsListDatas.push(this.newsListDatas[0]);
        this.newsListDatas.shift(); //删除第一个
        oUl.style.top = "0";
        this.flag = !this.flag;
      }, 500);
    },
  },
  mounted() {
    this.timer = setInterval(this.scrollNews, 2000);
  },
};
</script>
<style lang="less">
.index-news {
  .news {
    width: 100%;
    display: flex;
    justify-content: space-between;
    position: relative;
    height: 4rem;
      overflow: hidden;
    img {
      height: 3rem;
      width: 7rem;
      margin-left: 1rem;
    }
    .news-list {
      width: 100%;
      width: calc(100% - 10rem);
      height: 3rem;
      position: absolute;
      top: 0;
      left: 9rem;
      
      li {
        height: 3rem;
        line-height: 3rem;
      }
    }
    .trans {
      transition: all 0.5s;
    }
    .more {
      width: 3rem;
      height: 3rem;
      line-height: 3rem;
      text-align: center;
    }
  }
}
</style>